<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:28
-->
<template>
  <div ref="container" style="height: 200px;"></div>
</template>

<script>
// 引入柱状图构造函数
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      // 临时存放设备在线数目数据
      tempData: [],
    };
  },
  methods: {
    async getDevice() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      // console.log(res,'获取响应');
      let i = 0;
      res.data.forEach((item, index) => {
        var obj = {
          type: item.type,
          value: item.value,
        }
        // switch (obj.type) {
        //   case '山西农大主体育场工程': obj.type = '山西农大主体育场工程'; break;
        //   case '太原理工大学一号教学楼工程': obj.type = '太原理工大学一号教学楼工程'; break;
        //   case '兰州理工大学': obj.type = '兰州理工大学'; break;
        //   case '湘南学院': obj.type = '湘南学院'; break;
        //   case '中北大学': obj.type = '中北大学'; break;
        //   default: break;
        // };
        this.tempData[i] = obj;
        i++;
      });
      // 查看是否获取到数据
      // console.log(this.tempData);
      this.loadCharts();
    },
    loadCharts() {
      const columnPlot = new Column(this.$refs.container, {
        data: this.tempData,
        xField: 'type',
        yField: 'value',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
            fontSize:20,
          },
        },
        xAxis: {
          label: {
            // rotate:+45,
            autoHide: true,
            autoRotate: false,
            style: {
              fontSize: 10,
              fill: '#303946',
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fontSize: 13,
              fill: '#303946',
            },
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          value: {
            alias: '设备在线数目',
          },
        },
      });

      columnPlot.render();
    }
  },
  mounted() {
    // this.loadCharts();
    this.getDevice();
  },
};
</script>
<style scoped></style>